<template>
	<view>
		<image :src="$imgUrls(pageData.img)" mode="widthFix" class="rows"></image>
		<block v-if="pageData.list && pageData.list.length">
		<view class="viewbox auto m-top50">
			<view class="row a-center m-bot30" v-for="(item,index) in pageData.list" :key="index">
				<view class="rankNum flexac color_66 size30 bold m-right20">
					<image :src="$online(`${index+1}.png`)" class="rankNum" v-if="index <= 2"></image>
					<text v-else>{{index+1}}</text>
				</view>
				<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="user_img bor_radius m-right20"></image>
				<view class="flex-1 d-flex f-column ">
					<text class="color_33 size28">{{item.v_name}}</text>
					<text class="color_66 size22">{{item.department}}</text>
				</view>
				<view class="d-flex a-center color_FF6 size28">
					<text class="bold">{{item.rank_score}}</text>
					<text>分</text>
				</view>
				
				
			</view>
		</view>
		
		
		<!-- <view class="bottomBar">
			<view class="botBtn flexac">
				<view class="look flexac white size32">加载更多</view>
			</view>
		</view> -->
		</block>
		<empty v-else></empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {

		data() {
			return {
               act_id:'',
			   gid:'',
			   pageData:'',
			}
		},
		onLoad(opt) {
			if(opt.act_id) this.act_id = opt.act_id;
			if(opt.gid) this.gid = opt.gid;
			this.getAllRankingList();
		},
		methods: {
			getAllRankingList(){
				this.$http.post({
					url:'/SRA_Standup2021/getAllRankingList',
					data:{
						act_id:this.act_id,
						gid:this.gid,
						token: this.bid
					}
				}).then(res=>{
					if(!res.success) return;
					this.pageData = res.data;
				})
			}
		},
		computed:{
			...mapState(['bid']),
		}
	}
</script>

<style lang="scss" scoped>
	.rankNum {
		width: 58rpx;
		height: 70rpx;
	}

	.user_img {
		width: 70rpx;
		height: 70rpx;
	}

	.progor {
		width: 160rpx;
		height: 10rpx;
		background: #E4E4E4;
		border-radius: 6rpx;
		position: relative;
		overflow: hidden;
	}

	.schPro {
		height: 100%;
		background-color: #FF5255;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bottomBar {
		width: 100%;
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.botBtn {
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 77777;
		box-sizing: border-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.look {
		width: 690rpx;
		height: 70rpx;
		background-color: #F95652;
		border-radius: 10rpx;
		overflow: hidden;
	}
</style>